<script setup lang="ts">
import { HistoryPaper } from "../../index";
import { getHistoryPaperByIDAPI } from "../../api/paper.ts";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { pdXX, xzXX } from "../../utils.ts";

const route = useRoute();
const id = route.params.id;

const paper = ref<HistoryPaper>();

getHistoryPaperByIDAPI(id as number)
  .then((response) => {
    if (response.status !== 200) {
      throw new Error("网络错误");
    }
    return response.data;
  })
  .then((result) => {
    paper.value = result.data;
  });
</script>

<template>
  <div v-if="paper" class="m-5">
    <div class="text-3xl m-10">{{ paper.title }}</div>
    <div v-if="paper.xzAnswers">
      <div class="title">选择题</div>
      <div v-for="(xzAnswer, index) in paper.xzAnswers" :key="xzAnswer.id">
        <div class="question-title">{{ index + 1 }}.{{ xzAnswer.title }}</div>
        <div class="flex question-content">
          <div class="question-xz-item">A. {{ xzAnswer.choice1 }}</div>
          <div class="question-xz-item">B. {{ xzAnswer.choice2 }}</div>
          <div class="question-xz-item">C. {{ xzAnswer.choice3 }}</div>
          <div class="question-xz-item">D. {{ xzAnswer.choice4 }}</div>
        </div>
        <div class="flex question-content">
          <div class="question-xz-item">
            你的回答:
            <span class="text-red-600">{{
              xzXX[parseInt(xzAnswer.answer)]
            }}</span>
          </div>
          <div class="question-xz-item">
            正确回答:
            <span class="text-red-600">{{
              xzXX[parseInt(xzAnswer.correctAnswer)]
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="paper.pdAnswers">
      <div class="title">判断题</div>
      <div v-for="(pdAnswer, index) in paper.pdAnswers" :key="pdAnswer.id">
        <div class="question-title">{{ index + 1 }}.{{ pdAnswer.title }}</div>
        <div class="flex question-content">
          <div class="question-xz-item">
            你的回答:
            <span class="text-red-600">{{
              pdXX[parseInt(pdAnswer.answer)]
            }}</span>
          </div>
          <div class="question-xz-item">
            正确回答:
            <span class="text-red-600">{{
              pdXX[parseInt(pdAnswer.correctAnswer)]
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="paper.tkAnswers">
      <div class="title">填空题</div>
      <div v-for="(tkAnswer, index) in paper.tkAnswers" :key="tkAnswer.id">
        <div class="question-title">{{ index + 1 }}.{{ tkAnswer.title }}</div>
        <div class="flex question-content">
          <div class="question-xz-item">
            你的回答:
            <span class="text-red-600">{{ tkAnswer.answer }}</span>
          </div>
          <div class="question-xz-item">
            正确回答:
            <span class="text-red-600">{{ tkAnswer.correctAnswer }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.question-xz-item {
  @apply px-2;
}
</style>
